<template>
	<view>
		<view class="uni-list">
			<view class="uni-list-cell" @click="jumpInfoClickEvent(itemFilter(item))" hover-class="uni-list-cell-hover" v-for="(item, index) in goodes_filter(goodesList)" :key="index">
				<view class="uni-media-list">
					<view class="uni-media-list-logo">
						<!-- #ifdef MP-ALIPAY -->
						<image class="image" lazy-load :src="item.src" />
						<!-- 非支付宝平台也可以使用lazy-load -->
						<!-- #endif -->
						<!-- #ifndef MP-ALIPAY -->
						<image class="image" :class="{ lazy: false }" :data-index="index" @load="imageLoad" :src="true ? item.pict_url : ''" />
						<image class="image placeholder" :class="{ loaded: item.loaded }" :src="placeholderSrc" />
						<!-- #endif -->
					</view>
					<view class="uni-media-list-body">
						<view class="item-title">{{ item.title || '' }}</view>
						<view class="item-showtwo">
							<text>{{ item | couponsFilters }}元优惠券</text>
							<text>{{ item.nick || '' }}</text>
						</view>
						<view class="item-showthree">
							<view>
								<text>卷后</text>
								<text>￥{{ item | goodsAfter }}.00</text>
							</view>	

							<text>卷前￥{{ item | volumeFilte  }}</text>
						</view>
						<view class="item-showfour">
							已有
							<text>{{ item.volume || '0' }}</text>
							人付款
						</view>
					</view>
				</view>
			</view>
		</view>
		<image v-show="isInfoShow" class="show-loading" src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3829668102,3712899843&fm=26&gp=0.jpg" mode=""></image>
		<view class="foot-moduler"></view>
	</view>
</template>

<script>
export default {
	//传下来的
	props: ['goodesList','isInfoShow'],
	//过滤属性

	filters: {
		goodsAfter(v) {
			if(v.coupon_start_fee){
				return v.coupon_start_fee * 1 - v.coupon_amount * 1;
			}else{
				if(JSON.parse(uni.getStorageSync('trackAry'))){
					let temp =JSON.parse(uni.getStorageSync('trackAry'))
					let temp2=''
					let temp3=''
					temp.forEach(el=>{
						if(el.item_id==v.num_iid){
					
								temp2=  el.coupon_start_fee * 1
								temp3=el.coupon_amount * 1;
						}
					})
					return temp2-temp3
				}
				return ""
			}
		},
		couponsFilters(v){
			if(v.coupon_amount){
				return v.coupon_amount
			}else{
				if(JSON.parse(uni.getStorageSync('trackAry'))){
					let temp =JSON.parse(uni.getStorageSync('trackAry'))
					let temp2=''
					temp.forEach(el=>{
						if(el.item_id==v.num_iid){
						
								temp2= el.coupon_amount
						}
					})
					return temp2
				}
				return ""
			}
		},
		//券前
		volumeFilte(v){
			if(v.coupon_start_fee){
				return v.coupon_start_fee
			}else{
				if(JSON.parse(uni.getStorageSync('trackAry'))){
					let temp =JSON.parse(uni.getStorageSync('trackAry'))
					let temp2=''
					temp.forEach(el=>{
						if(el.item_id==v.num_iid){
							
								temp2= el.coupon_start_fee
						}
					})
					return temp2
				}
				return ""
			}
		},
		
	},
	data() {
		var list = [];

		for (let i = 0; i < 10; i++) {
			list.push({
				src: `https://img.alicdn.com/bao/uploaded/i2/915497723/O1CN01Cqq4tK26vBNKEzU6M_!!0-item_pic.jpg`,
				show: true,
				loaded: false
			});
		}

		return {
			windowHeight: 0,
			placeholderSrc: '../../static/60x60.png',
			list: list,
			show: false
		};
	},
	// #ifndef MP-ALIPAY
	methods: {
		itemFilter(v){
			if(v.item_id){
				return v
			}else{
				if(JSON.parse(uni.getStorageSync('trackAry'))){
					let temp =JSON.parse(uni.getStorageSync('trackAry'))
					let temp2=''
					temp.forEach(el=>{
						if(el.item_id==v.num_iid){
							
								temp2= el
						}
					})
					return temp2
				}
			}
		},
		goodes_filter: function(v) {
			// let temp =[]
			// for(let i=0;i<v.length;i++){
			// 	temp.push({
			// 		src: `https://img.alicdn.com/bao/uploaded/i2/915497723/O1CN01Cqq4tK26vBNKEzU6M_!!0-item_pic.jpg`,
			// 		show: true,
			// 		loaded: false
			// 	})
			// }
			// if(temp.length){
			// 	console.log(temp)
			// 	return temp;
			// }
			return v;
		},
		//点击跳转前往info界面
		jumpInfoClickEvent(item) {
			let itemObj = JSON.stringify(item);
			uni.setStorageSync('itemObj', itemObj);
			uni.navigateTo({
				url: `../../pages/second-pages/item-info`
			});
		},
		load() {
			uni.createSelectorQuery()
				.selectAll('.lazy')
				.boundingClientRect(images => {
					images.forEach((image, index) => {
			
						if (image.top <= this.windowHeight) {
							this.goodesList[image.dataset.index].show = true;
						}
					});
				})
				.exec();
		},
		imageLoad(e) {
			this.goodesList[e.target.dataset.index].loaded = true;
		}
	},
	onLoad() {
		this.windowHeight = uni.getSystemInfoSync().windowHeight;
	},
	mounted() {
		
	},
	onShow() {
		if (!this.show) {
			this.show = true;
			setTimeout(() => {
				this.load();
			}, 1);
		}
	},
	onPageScroll() {
		this.load();
	}
	// #endif
};
</script>

<style lang="scss">
.foot-moduler {
	width: 100vw;
	height: 50px;
}
.placeholder {
	opacity: 1;
	transition: opacity 0.4s linear;
}

.placeholder.loaded {
	opacity: 0;
}

.uni-list {
	background-color: #ffffff;
	width: 100vw;
	display: flex;
	/* flex-direction: column; */
	overflow: hidden;
	flex-wrap: wrap;
}
.show-loading {
	display: block;
	margin: 0 auto;
	width: 280upx;
	height: 200upx;
}

.uni-list-cell {
	position: relative;
	display: flex;
	width: 49%;
	overflow: hidden;
	background-color: #fff;
	margin-bottom: 1vh;
}

.uni-media-list {
	padding: 10rpx 10rpx;
	box-sizing: border-box;
	color: black;
}
/* 图片设置 */
.uni-media-list-logo {
	height: 46vw;
	width: 49vw;
}
.uni-media-list-logo image {
	height: 100%;
	width: 100%;
	border-radius: 1.5vw;
}

.uni-media-list-logo {
	position: relative;
}

.uni-media-list-logo .image {
	position: absolute;
}

.uni-hello-text {
	padding: 15px 0px;
}
.uni-media-list-body {
	width: 100%;
	display: block;

	.item-title {
		width: 49vw;
		display: block;
		text-overflow: ellipsis;
		color: black;
		white-space: nowrap;
		font-size: 3.8vw;
		font-family: 黑体;
		overflow: hidden;
		margin: 1vh 0px;
	}
	.item-showtwo {
		display: flex;
		width: 49vw;
		justify-content: space-between;
		& > text:nth-child(1) {
			display: block;
			width: 50%;
			background-color: rgba(255, 0, 0, 0.5);
			color: black;
			font-size: 30upx;
			overflow: hidden;
			height: 8vw;
			border-radius: 2vw;
			text-align: center;
			line-height: 8vw;
		}
		& > text:nth-child(2) {
			width: 50%;
			font-size: 0.8rem;
			display: block;
			white-space: nowrap;
			height: 8vw;
			line-height: 8vw;
			text-overflow: ellipsis;
			overflow: hidden;
		}
	}
	.item-showthree {
		display: flex;
		width: 49vw;
		justify-content: space-between;
		align-items: center;

		view {
			width: 49%;
			display: flex;
			font-size: 0.8rem;
			justify-content: space-around;
			align-items: center;

			& > text:nth-child(1) {
				width: 70%;
				white-space: nowrap;
				display: block;
			}
			& > text:nth-child(2) {
				display: block;
				color: #f8285c;
			}
		}
		& > text {
			text-decoration: line-through;
			display: block;
			width: 49%;
			white-space: nowrap;
			font-size: 0.7rem;
			color: gray;
		}
	}
	.item-showfour {
		font-size: 0.8rem;
		text {
			font-size: 0.9rem;
			color: #f8285c;
		}
	}
}
</style>
